<template>
	<scroll-view @scrolltolower="handleBottom" scroll-y class="content" v-if="commList.length>0">
		<!-- 推荐区域 -->
		<view class="recomm">
			<view class="recomm-item" @click="To_detail(item.target)" v-for="item in commList" :key="item.id">
				<image :src="item.thumb" mode="widthFix"></image>
			</view>
		</view>
		<!-- 月份区域 -->
		<view class="month">
			<!-- 标题区域 -->
			<view class="month-tit">
				<view class="tit-left">
					<view class="date">{{monthdetail.MM}}/{{monthdetail.DD}}月</view>
					<view class="text">{{monthdetail.title}}</view>
				</view>
				<view class="tit-right">
					<text class="more">更多</text>
					<text class="iconfont icon-iconfontjiantou5"></text>
				</view>
			</view>
			<!-- 图片区域 -->
			<view class="albumImg">
				<view class="imgItem" @click="To_imgdetail(item,index)" v-for="(item) in monthdetail.items" :key="item.id">
					<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 热门区域 -->
		<view class="hot">
			<view class="hot-title">
				<text class="tip"></text>
				<text>热门</text>
			</view>
			<view class="hotImg">
				<view class="hotItem" v-for="item in hotList" :key="item.id">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="hotImg">
				
			</view>
			<u-loadmore :icon-type="iconType" :status="status" :load-text="loadText" />
		</view>
	</scroll-view>
</template>

<script>
	import {swiperList} from "@/api/home"
	// import swiperAction from "@/components/swiperAction"
	import moment from '@/utils/moment.js'
	export default{
		data(){ 
			return{
				// 推荐列表
				commList:[],
				// 月份
				monthdetail:{},
				// 热门图片
				hotList:[],
				// 接口参数
				parms:{
					limit:30,
					order:"hot",
					skip:0
				},
				// 加载文字
				loadText: {
					loadmore: '努力加载中',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				iconType: 'flower',
				// 加载状态
				status: 'loadmore',
			}
		},
		mounted() {
			this.loadData()
			// 修改页面标题
			uni.setNavigationBarTitle({
				title:"推荐"
			})
		},
		methods:{
			// 初始化数据
			loadData(){
				const{limit,order,skip}=this.parms
				swiperList({limit,order,skip}).then(res=>{
					console.log(res)
					if(res.res.vertical.length>0){
						this.status="loading"
					}else{
						this.status="nomore"
					}
					this.commList=res.res.homepage[1].items
					this.monthdetail=res.res.homepage[2]
					this.monthdetail.MM=moment(this.monthdetail.stime).format("MM")
					this.monthdetail.DD=moment(this.monthdetail.stime).format("DD")
					// 数组拼接 es6
					this.hotList= [...this.hotList,...res.res.vertical]
				})
			},
			handleBottom(){
				if(this.status=="loadmore"){
					this.parms.skip+=this.parms.limit
					this.loadData()
				}
			},
			// 推荐列表=>专辑详情
			To_detail(id){
				uni.navigateTo({
					url:'/pages/album/index?id='+id
				})
			},
			// 去图片详情
			To_imgdetail(item){
				console.log(item.user)
				var newData={
					user:item.user
				}
				console.log(newData)
				var newData=JSON.stringify(item)
				uni.navigateTo({
					url:'/pages/img/index?newData='+encodeURIComponent(newData)  
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.content{
		// 屏幕高度  减去  导航栏高度
		height: calc( 100vh - 32px );
	}
	.recomm{
		display: flex;
		flex-wrap: wrap;
		.recomm-item{
			width: 50%;
			padding: 10rpx;
			display: flex;
			image{
				align-items: center;
				justify-content: center;
			}
		}
	}
	.month-tit{
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 70rpx;
		padding: 0 20rpx;
		.tit-left{
			display: flex;
			font-weight: 600;
			.date{
				margin-right: 10rpx;
				color: $color;
			}
		}
	}
	.albumImg{
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		.imgItem{
			width: 33.33%;
			display: flex;
			border: 5rpx solid #fff;
			image{
				justify-content: center;
				align-items: center;
			}
		}
	}
	.hot{
		margin-top: 30rpx;
		padding: 20rpx 0;
	}
	.hot-title{
		padding: 0 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		.tip{
			display: inline-block;
			width: 10rpx;
			height: 30rpx;
			background-color: red;
			margin-right: 10rpx;
		}
		
	}
	.hotImg{
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.hotItem{
			width: 33.33%;
			border: 10rpx solid #fff;
			image{
				width: 100%;
			}
		}
	}
	.u-loadmore{
		width: 100%!important;
	}
	
</style>
